<template>
  <div class="lineup">
    <my-head title="现场管理"/>
    <div class="w9"><mu-text-field v-model="searchVal1" full-width placeholder="搜索" @change="changeSearchVal1"></mu-text-field></div>
    <mu-tabs :value.sync="active" full-width color="teal" @change="changeTabs">
      <mu-tab>排队中</mu-tab>
      <mu-tab>已入场</mu-tab>
    </mu-tabs>
    <div class="lineup-box" v-if="active === 0">
        <mu-data-table height="100%" :columns="columns1" :loading="loadingA" @row-click="openInfo" :sort.sync="sort" @sort-change="handleSortChange" :data="trailerList">
            <template slot-scope="scope">
                <td>{{scope.row.vehicleNo || "-"}}</td>
                <td>{{scope.row.lineNo || "-"}}</td>
                <td>{{scope.row.reportTime || "-"}}</td>
            </template>
        </mu-data-table>
    </div>
    <div class="lineup-box" v-if="active === 1">
        <mu-data-table height="100%" :columns="columns2" :loading="loadingB" @row-click="openInfo" :sort.sync="sort" @sort-change="handleSortChange" :data="trailerEntrance">
            <template slot-scope="scope">
              <td :class="scope.row.timeout == '是' ? 'red':''">{{scope.row.vehicleNo || "-"}}</td>
              <td :class="scope.row.timeout == '是' ? 'red':''">{{scope.row.loadingTime || "-"}}</td>
              <td :class="scope.row.timeout == '是' ? 'red':''">{{scope.row.timeout || "-"}}</td>
              <td class="red">{{scope.row.loadingWay || "-"}}</td>
            </template>
        </mu-data-table>
    </div>

        
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="openFullscreen">
      <mu-appbar color="primary" title="现场管理">
      <mu-button slot="left" icon @click="closeFullscreenDialog">
          <mu-icon value="close"></mu-icon>
      </mu-button>
      <mu-button slot="right" flat  @click="closeFullscreenDialog">
        关闭
      </mu-button>
      </mu-appbar>
      <div class="w9"><mu-text-field v-model="searchVal2" full-width placeholder="搜索" @change="changeSearchVal2"></mu-text-field></div>
      <div style="padding: 10px;height:calc(100vh - 120px);">
        <mu-data-table height="100%" :columns="columns3" :loading="loadingC" :sort.sync="sort" @sort-change="handleSortChange" :data="trailerDetail">
          <template slot-scope="scope">
            <td :class="true ? 'red':''">{{scope.row.vin || "-"}}</td>
            <td :class="scope.row.status == '已装车' ? 'red':''">{{scope.row.status || "-"}}</td>
            <td :class="scope.row.status == '已装车' ? 'red':''">{{scope.row.locationCode || "-"}}</td>
          </template>
        </mu-data-table>
      </div>
    </mu-dialog>
    
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'lineup',
  components: {
    myHead
  },
  data () {
    return {
      active: 0,
      requestOnce: true,
      openFullscreen: false,
      searchVal1: "",
      searchVal2: "",
      loadingA: false,
      loadingB: false,
      loadingC: false,
      sort: {
        name: '',
        order: 'asc'
      },
      columns1: [
        { title: '车牌号', width: 126,  name: 'vehicleNo' },
        { title: '排号', name: 'lineNo', width: 126, align: 'left'},
        { title: '报到时间', name: 'reportTime', align: 'left'},
      ],
      columns2: [
        { title: '车牌号', width: 200, name: 'vehicleNo' },
        { title: '装车时效', name: 'loadingTime', width: 126, align: 'left'},
        { title: '是否预警', name: 'timeout', width: 126, align: 'left'},
        { title: '装车道', name: 'loadingWay', align: 'left'},
      ],
      columns3: [
        { title: 'VIN', name: 'vin' },
        { title: '状态', name: 'status', align: 'left'},
        { title: '待装库位', name: 'locationCode', align: 'left'},
      ],
      trailerList: [], // 排队中
      trailerEntrance: [], //已入场
      trailerDetail: [], // 现场管理
      currRow: null,
      list: []
    }
  },
  methods: {
    changeTabs(value){
      console.log(value)
      if(value == 0){
        this.viewWmsTrailerLineUp();
      }else if(value == 1){
        this.viewWmsTrailerEntrance();
      }
    },
    changeSearchVal1(val){
      this.searchVal1 = "";
      if(this.active == 0){
        this.viewWmsTrailerLineUp(val);
      }else if(this.active == 1){
        this.viewWmsTrailerEntrance(val);
      }
    },
    openInfo (index, row, event) {
      this.openFullscreen = true;
      this.trailerDetail = [];
      this.currRow = row;
      this.viewWmsTrailerDetail();
    },
    changeSearchVal2(val){
      this.viewWmsTrailerDetail(val);
    },
    viewWmsTrailerDetail(searchVal){
      if(this.requestOnce){
        this.requestOnce = false;
        this.loadingC = true;
        let data = Object.assign({},this.$store.state.user,{
          content: {
            loadingTaskNo: this.currRow.loadingTaskNo,
            vehicleNo: this.currRow.vehicleNo,
            searchVal: searchVal || ""
          }
        });
        this.common.reqData(api.app('viewWmsTrailerDetail'), data, res=>{
          console.log("数据返回",res);
          this.requestOnce = true;
          this.loadingC = false;
          if(res.data.status == 100){
            this.trailerDetail = res.data.content.trailerDetail || [];
            console.log("this.trailerDetail", this.trailerDetail);
          }else{
            this.Toast({
              duration: 0,
              mask: true,
              message: res.data.msg
            });
          }
        },err =>{
          this.requestOnce = true;
          console.log(err)
          this.loadingC = false;
          this.Toast.clear();
        });
      }
    },
    closeFullscreenDialog () {
      this.openFullscreen = false;
      this.currRow = null;
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    viewWmsTrailerLineUp(searchVal){
      // 排队中
      if(this.requestOnce){
        this.requestOnce = false;
        this.loadingA = true;
        let data = Object.assign({},this.$store.state.user,{
          content: {
            searchVal: searchVal || ""
          }
        });
        this.common.reqData(api.app('viewWmsTrailerLineUp'), data, res=>{
          console.log("数据返回",res);
          this.requestOnce = true;
          this.loadingA = false;
          if(res.data.status == 100){
            this.trailerList = res.data.content.trailerList || [];
            this.trailerList = this.trailerList.sort((a,b)=>{return a.lineNo-b.lineNo;});
          }else{
            this.Toast({
              duration: 0,
              mask: true,
              message: res.data.msg
            });
          }
        },err =>{
            this.loadingA = false;
            this.requestOnce = true;
            console.log(err)
            this.Toast.clear();
        });
      }
    },
    viewWmsTrailerEntrance(searchVal){
      // 已入场
      if(this.requestOnce){
        this.requestOnce = false;
        this.loadingB = true;
        let data = Object.assign({},this.$store.state.user,{
            content: {
              searchVal: searchVal || ""
            }
        });
        this.common.reqData(api.app('viewWmsTrailerEntrance'), data, res=>{
          console.log("数据返回",res);
          this.requestOnce = true;
          this.loadingB = false;
          if(res.data.status == 100){
            this.trailerEntrance = res.data.content.trailerEntrance || [];
            this.trailerEntrance = this.trailerEntrance.sort((a,b)=>{return b.loadingTime-a.loadingTime;});
          }else{
            this.Toast({
              duration: 0,
              mask: true,
              message: res.data.msg
            });
          }
        },err =>{
          this.requestOnce = true;
          this.loadingB = false;
          console.log(err)
          this.Toast.clear();
        });
      }
    }
  },
  mounted () {
    this.viewWmsTrailerLineUp();
  },
  watch: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lineup-box{
    height: calc(100vh - 150px);
}
.w9 .mu-input{
    margin-bottom: 0;
    padding-bottom: 0;
}
td.red{
    color: #cb0000;
}
.w9{
    width: 90%;
    margin: 0 auto 0;
}
</style>
